<template>
  <div>
    <div
      class="category-block"
      v-for="(item, index) in commodityList"
      :key="index"
    >
      <div class="category-list-title">
        {{ item.title }}
      </div>
      <div class="category-list-main">
        <div
          class="list-main-item"
          v-for="(subItem, subIndex) in item.children"
          :key="subIndex"
        >
          <div class="main-item-image">
            <van-image
              width="2.688rem"
              height="2.688rem"
              :src="subItem.imageUrl"
            />
          </div>
          <div class="main-item-text">{{ subItem.goodsName }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    commodityList: {
      type: Array,
      default: function() {
        return [
          {
            id: '1',
            title: '孕婴奶粉',
            children: [
              {
                id: '1-1',
                imageUrl: require('../../../images/category/app_wap_list1.jpg'),
                goodsName: '一段奶粉',
              },
              {
                id: '1-2',
                imageUrl: require('../../../images/category/app_wap_list1.jpg'),
                goodsName: '二段奶粉',
              },
              {
                id: '1-3',
                imageUrl: require('../../../images/category/app_wap_list1.jpg'),
                goodsName: '三段奶粉',
              },
              {
                id: '1-4',
                imageUrl: require('../../../images/category/app_wap_list1.jpg'),
                goodsName: '四段奶粉',
              },
              {
                id: '1-5',
                imageUrl: require('../../../images/category/app_wap_list1.jpg'),
                goodsName: '五段奶粉',
              },
              {
                id: '1-6',
                imageUrl: require('../../../images/category/app_wap_list1.jpg'),
                goodsName: '六段奶粉',
              },
            ],
          },
          {
            id: '2',
            title: '孕婴奶粉',
            children: [
              {
                id: '2-1',
                imageUrl: require('../../../images/category/app_wap_list1.jpg'),
                goodsName: '一段奶粉',
              },
              {
                id: '2-2',
                imageUrl: require('../../../images/category/app_wap_list1.jpg'),
                goodsName: '二段奶粉',
              },
              {
                id: '2-3',
                imageUrl: require('../../../images/category/app_wap_list1.jpg'),
                goodsName: '三段奶粉',
              },
              {
                id: '2-4',
                imageUrl: require('../../../images/category/app_wap_list1.jpg'),
                goodsName: '四段奶粉',
              },
              {
                id: '2-5',
                imageUrl: require('../../../images/category/app_wap_list1.jpg'),
                goodsName: '五段奶粉',
              },
              {
                id: '2-6',
                imageUrl: require('../../../images/category/app_wap_list1.jpg'),
                goodsName: '六段奶粉',
              },
            ],
          },
          {
            id: '3',
            title: '孕婴奶粉',
            children: [
              {
                id: '3-1',
                imageUrl: require('../../../images/category/app_wap_list1.jpg'),
                goodsName: '一段奶粉',
              },
              {
                id: '3-2',
                imageUrl: require('../../../images/category/app_wap_list1.jpg'),
                goodsName: '二段奶粉',
              },
              {
                id: '3-3',
                imageUrl: require('../../../images/category/app_wap_list1.jpg'),
                goodsName: '三段奶粉',
              },
              {
                id: '3-4',
                imageUrl: require('../../../images/category/app_wap_list1.jpg'),
                goodsName: '四段奶粉',
              },
              {
                id: '3-5',
                imageUrl: require('../../../images/category/app_wap_list1.jpg'),
                goodsName: '五段奶粉',
              },
              {
                id: '3-6',
                imageUrl: require('../../../images/category/app_wap_list1.jpg'),
                goodsName: '六段奶粉',
              },
            ],
          },
          {
            id: '4',
            title: '孕婴奶粉',
            children: [
              {
                id: '4-1',
                imageUrl: require('../../../images/category/app_wap_list1.jpg'),
                goodsName: '一段奶粉',
              },
              {
                id: '4-2',
                imageUrl: require('../../../images/category/app_wap_list1.jpg'),
                goodsName: '二段奶粉',
              },
              {
                id: '4-3',
                imageUrl: require('../../../images/category/app_wap_list1.jpg'),
                goodsName: '三段奶粉',
              },
              {
                id: '4-4',
                imageUrl: require('../../../images/category/app_wap_list1.jpg'),
                goodsName: '四段奶粉',
              },
              {
                id: '4-5',
                imageUrl: require('../../../images/category/app_wap_list1.jpg'),
                goodsName: '五段奶粉',
              },
              {
                id: '4-6',
                imageUrl: require('../../../images/category/app_wap_list1.jpg'),
                goodsName: '六段奶粉',
              },
            ],
          },
        ]
      },
    },
  },
  data() {
    return {}
  },
}
</script>
<style lang="less" scoped>
.category-list-title {
  font-size: 0.512rem;
  color: #333;
  font-weight: 600;
  margin-left: 0.426667rem;
  padding-top: 0.426667rem;
}
.category-list-main {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.426667rem;
  font-size: 0.597333rem;
  .list-main-item {
    width: 4.053333rem;
    height: 4.053333rem;
    text-align: center;
    .main-item-image {
      width: 2.688rem;
      height: 2.688rem;
      margin: 0 auto;
    }
    .main-item-text {
      font-size: 0.512rem;
      margin-top: 0.085333rems;
      height: 0.512rem;
    }
  }
}
</style>
